<template>
  <view class="newUser" :style="[outModuleCss]" v-if="goodsList.length">
    <image
      mode="aspectFill"
      :style="[moduleBgCss]"
      :src="propsData.moduleCss.bgImg || asyncImgs.index.bg3"
      class="module-bg"
    ></image>
    <view class="newUserContent">
      <view class="newUserData">
        <view class="newUserTit">
          <view class="title">
            <view class="titLet">新人首单专享</view>
            <view class="titRig">超值特惠 任选一件</view>
          </view>

          <view
            class="more"
            @click="$utils.toUrl('/marketing/newUser/index/index')"
            >更多</view
          >
        </view>

        <scroll-view scroll-x class="list">
          <view
            class="item"
            v-for="(sku, i) in goodsList"
            :key="i"
            @click="
              $utils.toUrl(
                `/goods/goods/goods?id=${sku.id}&activity_new_user_id=${id}`
              )
            "
          >
            <view class="img"
              ><image :src="sku.cover_pic" mode="aspectFill"></image>
            </view>
            <view class="txt">
              <view class="tit">{{ sku.name }}</view>
              <view class="price">
                <view class="let">
                  {{ sku.price | priceBeforeZero }}
                  {{ sku.price | priceAfterZero }}
                </view>
                <view class="rig" @click.stop="add(sku)">
                  <i class="iconfont icon-add-select"></i>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <goodsAddCart :good="goodsOfAdd"></goodsAddCart>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import { newUser as info } from "@/api/marketing/newUser";
import goodsAddCart from "../goodsAddCart/index.vue";

export default {
  name: "newUser",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin],
  components: {
    goodsAddCart,
  },
  data() {
    return {
      id: "",
      goodsList: [],
      goods_ext: [],
      goodsOfAdd: {}, // 添加到购物车的商品
    };
  },
  async created() {
    const infoRes = await info();
    if (!infoRes.code) {
      this.couponList = infoRes.coupon_list || [];

      if (infoRes.data) {
        this.goods_ext = infoRes.goods_ext;
        this.id = infoRes.data.id;
        this.goods_ids = infoRes.data.goods_ids || [];
        this.getGoodsList({ goods_id: infoRes.data.goods_ids }, 1);
      }
    }
  },
  methods: {
    add(item) {
      let goods = Object.assign({}, item);

      this.goodsOfAdd = { ...goods };//, activity_new_user_id: this.id
      setTimeout(() => {
        this.goodsOfAdd = {};
      }, 1);
    },

    async getGoodsList(params, type = 0) {
      let res = await this.$allrequest.diy.getGoodsList(params, true);

      if (!res.code) {
        if (!type) {
          this.goods = res.data.list || [];
        } else {
          let goodsList = res.data.list || [],
            { goods_ext } = this;

          goodsList.forEach((el) => {
            let item = goods_ext.find((e) => e.goods_id === parseInt(el.id));
            if (item) {
              el.price = item.price;
            }
          });

          this.goodsList = goodsList;
        }
      }
    },
  },

  filters: {
    priceBeforeZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
};
</script>

<style lang="scss" scoped>
.newUser {
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.newUserData {
  padding: 20rpx;
}

.newUserTit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;

  .title {
    flex: 1;
    display: flex;
    align-items: flex-end;
    line-height: 1;
  }

  .titLet {
    margin-right: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .titRig {
    font-size: 24rpx;
  }
}

.list {
  padding: 20rpx 0 10rpx;
  white-space: nowrap;
  overflow-x: auto;
  .item {
    display: inline-block;
    margin-right: 20rpx;
    width: 180rpx;
    padding: 10rpx 0;
    vertical-align: middle;
    background: #fff;
    border-radius: 8rpx;
    overflow: hidden;
    box-sizing: border-box;
  }

  .img {
    margin: 14rpx auto 16rpx;
    width: 148rpx;
    height: 134rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .txt {
    padding: 0 8rpx;
  }
  .tit {
    margin: 12rpx 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24rpx;
    font-weight: bold;
    color: #262626;
  }
  .price {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .let {
      font-size: 24rpx;
      color: #fa2c1b;
      font-weight: bold;

      &:before {
        content: "￥";
        font-size: 20rpx;
      }
    }

    .rig {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42rpx;
      height: 42rpx;
      border-radius: 8px;
      background: #f0250e;
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>
